<template>
    <div>
        <div>
            <el-input style="width: 150px;float: left"
                      v-model="search1"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入业主查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search2"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入楼栋查询">
            </el-input>
            <el-button type="primary" style="float: left;margin-left: 50px;margin-bottom: 10px" @click="getExcel">导出Excel
            </el-button>
            <el-table :summary-method="getSummaries"
                      show-summary :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe>
                <el-table-column label="序号" prop="wid"/>
                <el-table-column label="应收物业费" prop="ys"/>
                <el-table-column label="实收物业费" prop="ss"/>
                <el-table-column label="应收物业费分解" prop="ysfj"/>
                <el-table-column label="收缴率" prop="sjl"/>
                <el-table-column label="月份" prop="month.mname"/>
                <el-table-column label="业主" prop="owner.oname"/>
                <el-table-column label="楼栋" prop="tower.tname"/>
            </el-table>
        </div>
        <div class="block" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "vue1",
        data() {
            return {
                pageSize: 3,
                currentPage: 1,
                total: 0,
                search: '',
                search1: '',
                search2: '',
                activeName: 'a',
                radio: '1',
                users: {
                },
            };
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8081/selectWaterList')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                })
        },
        methods:{
            getExcel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../router/Export2Excel.js')
                    const tHeader = ['序号','应收水费','实收水费','实收水费分解','收缴率']
                    const filterVal = [ 'wid','ys','ss','ysfj','sjl']
                    const list = this.users
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '水费统计')
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            onSearch() {
                let postData = this.qs.stringify({
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8081/selectWaterList',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getPageData();
                console.log(this.pageSize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getPageData();
                console.log(this.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                let start = (this.currentPage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.schArr = this.users.slice(start, end);
                this.total = this.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8081/getWaterCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
        }
    }
</script>

<style scoped>

</style>
